<template>
  <div class="clockin-page no-margin">
    <navbar-model></navbar-model>
    <sidebar-model :init_active="active"></sidebar-model>
    <div class="container">
      <div class="images">
        <imagegroup-model></imagegroup-model>
      </div>
      <div class="cards">
        <cards-model v-on:del_get_refresh = 'get_refresh'></cards-model>
      </div>
    </div>
  </div>
</template>

<script>
import SidebarModel from './SidebarModel.vue'
import CardsModel from './CardsModel.vue'
import ImagegroupModel from './ImagegroupModel.vue'
import NavbarModel from './NavbarModel.vue'
import note from './note.vue'
export default {
  data () {
    return {
      active: 'clock-in',
      clockin_data: {}
    }
  },
  methods:{
    get_refresh(data){
      this.$router.go(0)
      console.log(data)
    }
  },
  created () {
    console.log('clockinpage')
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
  components: {
    SidebarModel,
    CardsModel,
    ImagegroupModel,
    NavbarModel,
    note
  }
}
</script>
<style scoped>
.clockin-page {
  background: linear-gradient(to bottom right, #95b691, #d3e5d0);
  width: 100%;
  height: 100vh;
}
.container {
  background-color: #475b441b;
  border-radius: 15px;
  top: 8%;
  left: 5%;
  width: 1350px;
  height: 650px;
  position: absolute;
}
.cards {
  border-radius: 15px;
  position: absolute;
  top: 70%;
  left: 50%;
  width:600px;
  transform: translate(-50%, -50%);
}
.top-right {
  position: absolute;
  top: 20%;
  right: 0;
}
.no-margin {
  margin: 0;
}
</style>
